<template>
    <div id="searchResultContent">
        <!-- 分页 -->
        <div class="block">
            <span class="demonstration">分页显示</span>
            <div class="searchResultContent">
                <div class="resultDiv" v-for="(resource,index) in resourceInformation" :key="resource.id" @click="giveUrlToVideoView(resource,index)">
                    <div class="singleContent">
                        <router-link to="videoview">
                            <div class="routerDiv">
                                <img :src="resource.resourceCover" style="width:120px;height:100px">
                                <p>{{resource.resourceTitle}}</p>
                            </div>
                        </router-link>
                    </div>
                </div>
            </div>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="prev,pager,next"
                :current-page="currentPage"
                :page-size="pageSize"
                :page-sizes="[15, 30, 50, 100]"
                :page-count="pageCount"
                :total="totalResult">
                <!-- current-page：显示页面时，默认显示第几页 -->
                <!-- page-size：每页显示的条目个数 -->
                <!-- page-sizes：调节每页显示的条目个数，例如每页显示10个条目、30个条目等 -->
            </el-pagination>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import {setCookie,getCookie} from '../assets/js/cookie.js'
export default {
    created(){

    },
    mounted(){
        this.getSearchResult()
    },
    data(){
        return{
            pageVal:1,
            currentPage:1,
            totalResult:0,
            pageCount:10,
            pageSize:10,
            allResourceInformation:[],
            resourceInformation:[],
            getSearchKeyWord:'',
            imgSrc:'',
            //前缀URL
            prifixUrl:'http://localhost:8080/uploadfilecover/'
        }
    },
    methods:{
        getSearchResult(){
            this.getSearchKeyWord=getCookie('searchKeyWord')
            let data={'resourceTitle':this.getSearchKeyWord}
            axios.post('http://localhost:8080/resource/returnSearchResource',data).then((res)=>{
                console.log(data)
                console.log(res)
                    if(res.data==null){
                        alert("未能找到您想要的结果！")
                    }else{
                        console.log(res)
                        this.allResourceInformation=res.data
                        // this.resourceInformation=res.data
                        // console.log(this.resourceInformation)
                        console.log(this.allResourceInformation)
                        this.resourceInformation=this.allResourceInformation.slice(0,10)
                        console.log(this.resourceInformation)
                        // setCookie('searchKeyWord',"",1000*60)
                    }
            }),
            // 访问后台得到查询对象在表中的总条目数
            axios.post('http://localhost:8080/resource/countResource',data).then((res)=>{
                console.log(data)
                console.log("得到的结果条数")
                console.log(res)
                console.log(res.data)
                this.totalResult=res.data
                console.log(this.totalResult)
                if(res.data==0){
                    alert("未能找到您想要的结果！")
                }
            })
        },
        giveUrlToVideoView(resource,index){
            this.videoSrc="http://localhost:8080/uploadfile/"+this.videoUrl9
            setCookie('videoCode',resource.resourceUrl,1000*10)
        },
        // 每页的条目数
        handleSizeChange(val){
            console.log('每页'+{val}+'条')
            this.getSearchResult()
        },
        //跳转到某一页时的逻辑操作
        handleCurrentChange(val){
            console.log('当前在第'+val+'页')
            console.log(val)
            this.pageVal=val
            console.log(this.pageVal)
            if(this.pageVal==1){
                this.resourceInformation=this.allResourceInformation.slice(0,this.pageVal*this.pageSize)
                console.log("if生效")
            }else{
                this.resourceInformation=this.allResourceInformation.slice((this.pageVal-1)*this.pageSize,this.pageVal*this.pageSize)
                console.log("else生效")
            }
            // this.resourceInformation=this.allResourceInformation.slice(10,20)
            console.log(this.resourceInformation)
            // this.getSearchResult()
        }
    }
}
</script>

<style scoped>
#searchResultContent{
    position: absolute;
    left: 20%;
    width: 70%;
    height: 100%;
    text-align: center;
}
.searchResultContent{
        text-align: center;
}
.searchResultContent ul{
    width: 400px;
    height: 50px;
}
.resultDiv a{
    text-decoration: none;
}
.routerDiv{
    display: flex;
}
.router-link-active{
    text-decoration: none;
}
.singleContent{
    display: flex;
}
</style>
